<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #drag{
            width: 150px;
            height: 30px;
            /* border:solid 1px #f66; */
            background: #f66;
        }
        #content{
            width: 150px;
            height: 300px;
            background: green;
        }
    </style>
</head>
<body>
    <!-- 拖动目标元素
    
        ondragstart
        ondrag
        ondragend

        释放目标
        ondragenter
        ondragover
        ondragleave
        ondrop
    -->
    <div id="drag" draggable="true">drag1</div>
    <div id="content">content</div>
    <script>
        let drag = document.getElementById("drag")
        let content = document.getElementById("content")

       drag.addEventListener('dragstart',(e)=>{
           e.dataTransfer.setData('te',e.target.id)
           console.log(e.target.id);
           
           console.log('start');
           
       })
       drag.addEventListener('dragend',(e)=>{
           e.currentTarget.style.background='gray'
           console.log('dragdrop');
           
       })
       content.addEventListener('dragover',(e)=>{
           e.preventDefault()
       })
       content.addEventListener('drop',(e)=>{
           e.currentTarget.style.background = "yellow"
           let data = e.dataTransfer.getData('te')
           content.appendChild(document.getElementById(data))

           e.preventDefault();
       })
    </script>
</body>
</html>